<template>
  <!-- vue3页面 -->
  <a-card
    style="border-radius: 10px; height: 100%"
    :bodyStyle="{ padding: '5px 15px' }"
  >
    <template #title>
      <div style="width: 100%; text-align: center">专项经费申请</div>
    </template>
    <a-form
      ref="formRef"
      :model="formState"
      style="margin-top: 20px"
      :label-col="{ style: { width: '110px' } }"
      @finish="onFinish"
    >
      <a-form-item
        label="专项经费名称"
        name="name"
        :rules="[{ required: true, message: '请输入专项经费名称' }]"
      >
        <a-input
          v-model:value="formState.name"
          placeholder="请输入专项经费名称"
        />
      </a-form-item>
      <a-form-item label="经费类型" name="type">
        <a-radio-group v-model:value="formState.type">
          <a-radio :value="0">工会专项经费</a-radio>
          <a-radio :value="1">基层工会专项经费</a-radio>
          <a-radio :value="2">协会专项经费</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="申请金额"
        name="amount"
        :rules="[
          { type: 'number', required: true, message: '请输入专项经费申请金额' },
        ]"
      >
        <a-input-number
          v-model:value="formState.amount"
          addon-after="￥"
          allowClear
          style="margin-bottom: 10px; width: 100%"
          :controls="false"
          placeholder="请输入专项经费申请金额"
        />
      </a-form-item>
      <a-row>
        <a-col :span="12">
          <a-form-item label="申请工会">
            <a-input placeholder="环境工会" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="申请单位">
            <a-input placeholder="环境单位" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="申请人">
            <a-input placeholder="是呆龙没错了" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="申请人电话">
            <a-input placeholder="17589520234" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="申请人时间">
            <a-input
              :placeholder="
                new Date().getFullYear() +
                '-' +
                (new Date().getMonth() + 1) +
                '-' +
                new Date().getDate()
              "
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item
        label="申请理由"
        name="argument"
        :rules="[{ required: true, message: '请输入专项经费申请理由' }]"
      >
        <a-textarea
          :rows="6"
          v-model:value="formState.argument"
          placeholder="请输入专项经费申请理由"
        />
      </a-form-item>
      <a-form-item>
        <div style="width: 100%; display: flex; justify-content: space-around">
          <a-button style="width: 37%" @click="formRef?.resetFields()"
            >重置</a-button
          >
          <a-button type="primary" style="width: 37%" html-type="submit"
            >提交</a-button
          >
        </div>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { FormInstance } from "ant-design-vue";
import { reactive, toRaw, ref } from "vue";
const formRef = ref<FormInstance>();
const formState = reactive({
  name: "",
  type: 0,
  amount: null,
  argument: "",
});
const onFinish = (value: typeof formState) => {
  console.log("submit!", toRaw(value));
};
</script>

<style scoped></style>
